import React, { Component } from 'react'
import { SearchOutline } from 'antd-mobile-icons'
import { ShoppingCartOutlined } from '@ant-design/icons';
import In from '../image/in.png'
import Med1 from '../image/med1.png'
import Med2 from '../image/med2.png'
import Med3 from '../image/med3.png'
import Med4 from '../image/med4.png'
import Med5 from '../image/med5.png'
import Med6 from '../image/med6.png'
import Med7 from '../image/med7.png'
import Med8 from '../image/med8.png'
import Med9 from '../image/med9.png'
import Med10 from '../image/med10.png'
import { Carousel } from 'antd';
import axios from 'axios';
// import shopDetail from './shopDetail';


export default class Shopping_Mall extends Component {
    //药品数据渲染
    componentDidMount() {
        axios({
            url: '/shopList',
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }


    //进入药品详情
    shopDetail(item){
        this.props.history.push({
            pathname:`/shopDetail/${item.id}`,
            state:{ data:item }
        })
        
    }

    //进入购物车页面
    cart(){
        this.props.history.push({
            pathname:`/cart`,
        })
    }

    state = {
        shopmedList: [
            {
                url: Med1,
                tit: '皮肤用药'
            },
            {
                url: Med2,
                tit: '妇科用药'
            },
            {
                url: Med3,
                tit: '肠胃消化'
            },
            {
                url: Med4,
                tit: '呼吸用药'
            },
            {
                url: Med5,
                tit: '营养补充'
            },
            {
                url: Med6,
                tit: '家庭常备'
            },
            {
                url: Med7,
                tit: '耳鼻咽喉'
            },
            {
                url: Med8,
                tit: '男科用药'
            },
            {
                url: Med9,
                tit: '骨科疼痛'
            },
            {
                url: Med10,
                tit: '心脑血管'
            }
        ],
        contentStyle :{
            height: '110px',
            color: '#fff',
            lineHeight: '110px',
            textAlign: 'center',
            background: '#364d79',
            borderRadius: '3px'
        },
        list:[],
    }

    render() {
        const { shopmedList,list,contentStyle } = this.state
        return (
            <div className="shop">
                {/* 商城 */}
                <div className="shop_top">
                    <p>商城</p>
                </div>
                <div className="shop_main">
                    {/* 搜索框 */}
                    <div className="shop_search">
                        <div className="sear">
                            <SearchOutline></SearchOutline><input type="text" placeholder="请输入药品名称" />
                        </div>
                        <img src={In} alt="" />
                    </div>
                    <div className="move">
                        <p>快速购药</p><p>安全品质保证</p>
                    </div>

                    {/* 药品图文混排 */}
                    <div className="shop_med">
                        {
                            shopmedList.length && shopmedList.map((item, index) => {
                                return <dl key={index}>
                                    <dt><img src={item.url} alt="" /></dt>
                                    <dd><p>{item.tit}</p></dd>
                                </dl>
                            })
                        }
                    </div>

                    {/* 轮播图 */}
                    <div className="shop_swiper">
                        <Carousel autoplay>
                            <div>
                                <h3 style={contentStyle}>
                                    <img src="https://img0.baidu.com/it/u=1727347017,1163254667&fm=26&fmt=auto" alt="" />
                                </h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}>
                                    <img src="https://img0.baidu.com/it/u=2549579646,523320341&fm=26&fmt=auto" alt="" />
                                </h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}>
                                    <img src="https://img0.baidu.com/it/u=2146462585,1109016797&fm=15&fmt=auto" alt="" />
                                </h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}>
                                    <img src="https://img0.baidu.com/it/u=3869858815,1837949836&fm=26&fmt=auto" alt="" />
                                </h3>
                            </div>
                        </Carousel>
                    </div>

                    {/* 推荐 */}
                    <div className="move">
                        <p>医我看</p><p>名医好物推荐</p>
                    </div>
                    <div className="shop_beal">
                        <img src="https://img1.baidu.com/it/u=1845662018,24126958&fm=15&fmt=auto" alt="" />
                    </div>

                    {/* 购物车图标 */}
                    <div className="shop_shop" onClick={()=>this.cart()}>
                        <p>
                            <ShoppingCartOutlined style={{ fontSize: '40px', color: '#fff', marginTop: '8px', marginLeft: '5px' }} />
                        </p>
                        <p>0</p>
                    </div>

                    {/* 药品列表 */}
                    <div className="move">
                        <p>美洽心选</p>
                    </div>
                    <div className="shop_box">
                        {
                            list.length && list.map((item, idx) => {
                               
                                return <dl key={idx}  onClick={() => this.shopDetail(item)}>
                                    <dt><img src={item.drugimg} alt="" /></dt>
                                    <dd>
                                        <p>{item.drug}</p>
                                        <p>￥{item.price}</p>
                                    </dd>
                                </dl>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

